<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    class="dialog"
    width="380px">
    <el-form
      :model="formData"
      label-width="90px"
      :rules="rules"
      ref="form"
      size="small">
      <template v-if="isCreate || isModify">
        <el-form-item label="账户名" prop="account">
          <el-input v-model="formData.account"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="roleId">
          <el-select v-model="formData.roleType" placeholder="请选择">
            <el-option
              v-for="item in roleTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </template>
      <template v-if="isCreate || isModifyPassword">
        <el-form-item label="密码" prop="pwd">
          <el-input v-model="formData.pwd" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="rePwd">
          <el-input v-model="formData.rePwd" type="password"></el-input>
        </el-form-item>
      </template>
    </el-form>
    <dialog-footer
      slot="footer"
      @cancel="dialogVisible = false"
      @confirm="confirm"
    />
  </el-dialog>
</template>
<script>
import { ROLE_TYPE_OPTIONS } from '@/utils/constants';
import {
  saveAdminUser, updateAdminUser, updateAdminUserPwd,
} from '@/api/account';

export default {
  props: {
    initFormData: Object,
    isCreate: Boolean,
    isModify: Boolean,
    isModifyPassword: Boolean,
  },
  data() {
    return {
      formData: {
        ...this.initFormData,
      },
      roleTypeOptions: ROLE_TYPE_OPTIONS,
      dialogVisible: false,
      rules: {
        account: [{ required: true, message: '账号名不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '真实姓名不能为空', trigger: 'blur' }],
        pwd: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
        rePwd: [{ required: true, validator: this.validatePassword, trigger: 'blur' }],
        roleType: [{ required: true, message: '角色不能为空', trigger: 'blur' }],
      },
    };
  },
  computed: {
    title() {
      if (this.isCreate) {
        return '新增账号';
      } if (this.isModify) {
        return '修改账号';
      }
      return '修改密码';
    },
  },
  watch: {
    initFormData(val) {
      this.formData = { ...val };
    },
  },
  methods: {
    confirm() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const params = { ...this.formData };
          delete params.rePwd;
          console.log(params);
          try {
            if (this.isCreate) {
              const result = await saveAdminUser(params);
              console.log('result', result);
            } else if (this.isModify) {
              await updateAdminUser(params);
            } else if (this.isModifyPassword) {
              await updateAdminUserPwd(params);
            }
            this.dialogVisible = false;
            this.$emit('confirm', this.formData);
            this.$message.success('操作成功');
          } catch (err) {
            console.log(err);
          }
        }
      });
    },
    validatePassword(rule, value, callback) {
      if (value !== this.formData.pwd) {
        return callback(new Error('两个密码不一致'));
      }
      return callback();
    },
  },
};
</script>
<style lang="scss" scoped>
  .dialog {
    ::v-deep .el-input__inner {
      width: 220px;
    }
  }
</style>
